<div id="content">
<div class="box" style="width: 325px; min-height: 300px; margin-top: 40px; margin-left: auto; margin-right: auto;">
  <div class="left"></div>
  <div class="right"></div>
  <div class="heading">
    <h1 style="background-image: url('images/lockscreen.png');">กรุณาใส่ข้อมูลของคุณ.</h1>
  </div>
  <div class="content" style="min-height: 150px;">
        <form action="" method="post" enctype="multipart/form-data" id="form">
      <table style="width: 100%;">
        <tbody><tr>
          <td style="text-align: center;" rowspan="4"><img class="bigKey" src="images/login.png" alt="กรุณาใส่ข้อมูลของคุณ."></td>
        </tr>
        <tr>
          <td>ชื่อผู้ใช้:<br>
            <input type="text" name="username" id="username" style="margin-top: 4px;">
            <br>
            <br>
            รหัสผ่าน:<br>
            <input type="password" name="password" id="password"  style="margin-top: 4px;"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td style="text-align: right;"><span class="loading"></span><a class="button blue"><span>เข้าสู่ระบบ</span></a></td>
        </tr>
      </tbody></table>
          </form>
  </div>
</div>
</div>

<script type="text/javascript">
function doLogin(){
	var user = $('#username').val();
	var pass = $('#password').val();
  /* do your AJAX call and processing here...*/
  $.ajax({
		type :'POST',
		url	 :'admin_query.php',
		data :{doLogin:true, uname:user, pwd:pass},
		dataType : 'json',
		beforeSend : function(){$('.loading').html('<img src="images/loading.gif">');},
		success : function(msg){
			//alert(msg);
			$('.loading').html('');
			if(msg.status == 0){
				
				// configurations for the buzzing effect. Be careful not to make it too annoying!
				var conf = {
						frequency: 5000,
						spread: 15,
						duration: 1000
					};
				
				// this is the call we make when the AJAX callback function indicates a login failure 
				$(".bigKey").vibrate(conf);
				
				// let's also display a notification
				if($(".warning").text() == ""){
					$("#form").append('<p class="warning">กรุณาป้อนชื่อผู้ใช้และรหัสผ่านให้ถูกต้องด้วยค่ะ!</p>');

					// clear the fields to discourage brute forcing 						
					$("#username").val("");
					$("#password").val("");	
					$("#username").focus();

					return false;
				}
			}else if(msg.status){
				window.location = '?m=index';
			}
			
		},
		error : function(error){
			alert(dump(error));
		}
	});        
      	
}
$(function() {
  $(".button").click( function(){
		doLogin();
  });
	
	$('#form input').keydown(function(e) {
		if (e.keyCode == 13) {
			doLogin();
			return false;
		}
	});
    
});
</script>